<template>
  <BoTable
    :columns="columns"
    :request="getAlarmList"
    ref="tableRef"
    row-key="id"
    :row-selection="rowSelection"
    :show-index="true"
  >
    <template #toolbars>
      <Space :size="8">
        <Button type="primary" @click="onRestore()"> 批量恢复 </Button>
      </Space>
    </template>
  </BoTable>
  <FormModal :columns="items"> </FormModal>
</template>
<route lang="json">
{
  "name": "center",
  "meta": {
    "title": "告警中心"
  }
}
</route>
<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import { useDicts } from '@boeyo/portal';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import { Button, Modal, Space, message } from 'ant-design-vue';
import { getAlarmList, restoreAlarm } from './api';

const tableRef = ref();
const selectKeys = ref<any[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    selectedRowKeys: selectKeys.value,
    onChange(values, all) {
      selectKeys.value = values;
    },
  };
});

const dictArr = ['alarm_type', 'alarm_status', 'alarm_level'];
const {
  alarmTypeEnum,
  alarmTypeOptions,
  alarmStatusEnum,
  alarmStatusOptions,
  alarmLevelEnum,
  alarmLevelOptions,
} = useDicts(dictArr);

const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '告警类型',
    dataIndex: 'alarmType',
    valueEnum: alarmTypeEnum.value,
  },
  {
    title: '告警编号',
    dataIndex: 'no',
  },
  {
    title: '告警时间',
    dataIndex: 'alarmTime',
    hideInSearch: true,
  },
  {
    title: '告警项',
    dataIndex: 'updateTime',
    hideInSearch: true,
  },
  {
    title: '告警等级',
    dataIndex: 'alarmLevel',
    valueType: 'status',
    hideInSearch: true,
    valueEnum: alarmLevelEnum.value,
  },
  {
    title: '告警状态',
    dataIndex: 'status',
    valueType: 'status',
    hideInSearch: true,
    valueEnum: alarmStatusEnum.value,
  },
  {
    title: '告警对象',
    dataIndex: 'alarmObj',
    customRender: ({ record }) => {
      return <div class='text-[#366ABE]'>{record.alarmObj}</div>;
    },
    hideInSearch: true,
  },
  {
    title: '告警描述',
    dataIndex: 'desc',
    hideInSearch: true,
    customRender: ({ record }) => {
      return <div class='text-[#ff4d4f]'>{record.desc}</div>;
    },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    actions() {
      return [
        {
          text: '手动恢复',
          onClick(record) {
            onRestore(record);
          },
        },
        {
          text: '详情',
          onClick(record) {
            onView(record);
          },
        },
      ];
    },
  },
]);

const { FormModal, open } = useFormModal({
  size: 'middle',
  column: 2,
});

const onView = (record) => {
  const noticeGroup = record.noticeGroup?.split(',');
  open({
    title: '告警详情',
    modalType: 'disabled',
    request: async () => {},
    defaultValue: {
      ...record,
      noticeGroup,
    },
  });
};

const items = computed<BoFormProps['columns']>(() => [
  {
    title: '告警编号',
    dataIndex: 'name',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入策略名称',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请输入策略名称',
    },
  },
  {
    title: '告警等级',
    dataIndex: 'alarmLevel',
    valueType: 'select',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入标签类型',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请输入标签类型',
      options: alarmLevelOptions.value,
    },
  },
  {
    title: '告警项',
    dataIndex: 'alarm',
    valueType: 'input',
  },
  {
    title: '告警状态',
    dataIndex: 'status',
    valueType: 'select',
    fieldProps: {
      options: alarmStatusOptions.value as any[],
    },
  },
  {
    title: '告警描述',
    dataIndex: 'desc',
    valueType: 'input',
    colProps: {
      span: 24,
    },
    formItemProps: {
      labelCol: {
        span: 2,
      },
      wrapperCol: {
        span: 22,
      },
    },
    render(record) {
      return (
        <div class='border-[1px] border-[#7C8187] py-[6px] text-[#ff4d4f]'>
          {record.desc}
        </div>
      );
    },
  },
  {
    title: '告警对象',
    dataIndex: 'alarmObj',
    valueType: 'input',
  },
  {
    title: '告警时间',
    dataIndex: 'alarmTime',
    valueType: 'input',
  },
  {
    title: '',
    dataIndex: 'line',
    valueType: 'input',
    render: () => {
      return <div style='height: 1px; width: 100%; background: #ccc;'></div>;
    },
    colProps: {
      span: 24,
    },
    formItemProps: {
      labelCol: {
        span: 0,
      },
      wrapperCol: {
        span: 24,
      },
    },
  },
  {
    title: '告警策略',
    dataIndex: 'alarmStrategy',
    valueType: 'input',
  },
  {
    title: '通知组',
    dataIndex: 'noticeGroup',
    valueType: 'select',
    fieldProps: {
      placeholder: '请输入标签类型',
      mode: 'multiple',
      options: [
        {
          label: '运维组',
          value: '0',
        },
        {
          label: '值班组',
          value: '1',
        },
        {
          label: '其他组',
          value: '2',
        },
      ],
    },
  },
]);

// 批量恢复和手动恢复
const onRestore = (record = null) => {
  const ids = record ? record.id : selectKeys.value.join();
  if (!ids) return message.info('请选择要恢复的数据');
  Modal.confirm({
    title: '确认恢复吗？',
    onOk: async () => {
      await restoreAlarm(ids);
      tableRef.value.refresh();
      selectKeys.value = [];
      message.success('操作成功');
    },
  });
};
</script>

<style lang="scss" scoped></style>
